{extend name="layout/app" /}

{block name="title"}探索{/block}

{block name="main"}
<main role="main" class="d-flex flex-grow-1">
    <div class="d-flex main-wrap justify-content-between min-vh-100">
        <div class="primary-col">
            <!-- 顶部导航条 -->
            <div class="breadcrumb d-flex justify-content-between align-items-center px-3 js-scroll">
                <a href="/login" class="btn btn-sm btn-icon only-on-sm" role="button">
                    <i class="iconfont icon-user"></i>
                </a>
                <h2 class="fs-18px fw-bold cursor-pointer js-top">探索</h2>
                <a class="btn btn-sm btn-icon" href="/blog/create" title="发长文">
                    <i class="iconfont icon-edit"></i>
                </a>
            </div>

            <!-- <nav class="nav nav-justified border-bottom">
                <a class="nav-link active" id="my-post" href="/">推荐</a>
                <a class="nav-link" id="my-replies" href="/">热门</a>
                <a class="nav-link" id="my-likes" href="/">用户</a>
                <a class="nav-link" id="my-fav" href="/">群</a>
            </nav> -->

            <div class="flash-news">
                <img src="/static/img/tag.jpg" alt="">
                <div class="flash-mask">
                    <h2 class="fs-18px fw-bold py-1">图片头条标题</h2>
                    <p class="fs-14px">14px说明字体</p>
                </div>
            </div>

            <section class="news-list">
            {if !$blogs }
                <div class="empty-text fs-3">空空如也</div>
            {else /}
                {foreach $blogs[0] as $blog}
                <div class="d-flex justify-content-between align-items-center p-3 link-dark border-bottom">
                    <div class="d-flex">
                        <img class="news-img" src="/static/img/tag.jpg" alt="">
                        <div class="d-flex flex-column">
                            <a href="/blog/show/{$blog.id}">
                                <h1 class="py-1 fs-18px lh-base">{$blog.title}</h1>
                            </a>
                        </div>
                    </div>
                    <div class="ms-auto ps-3">123</div>
                </div>
                {/foreach}
            {/if}
            </section>
        </div>
    </div>
</main>
{/block}

{block name="js"}
<script>
    document.addEventListener("DOMContentLoaded", () => {
        // 当前链接添加 active
        highlightActiveLink("blog");
        // 切换当前链接的 iconfont
        updateIconClassOnActive('.app-link', 'icon-search', 'icon-search-fill');
        // document.getElementById("my-post").classList.add('active');
    });
</script>
{/block}